<template>
  <div>
    <div class="list">
      <vuedraggable
      class="images"
      v-model="list"
      @end="updateValue"
    >
      <div class="item" v-for="(item, index) in list">
        <a-icon class="action-item delete-icon" type="delete" @click.stop="deleteItem(item)"></a-icon>
        <img :src="item.thumb" class="thumb" />
        <div class="type-c">{{item.type_text}}</div>
        <div class="status-s" v-if="item.pattern == 1">锁箱</div>
        <div class="status-c" v-if="item.status == 0">已下架</div>
        <div class="title" :title="item.title">{{item.title}}</div>
      </div>
      </vuedraggable>
      <div class="item add-item" @click="isShowSelect = true">
        <a-icon class="add-icon" type="plus"></a-icon>
        <div class="title">添加</div>
      </div>
    </div>
    <!-- <a-select class="select" mode="multiple" v-model="ids">
      <a-select-option :value="option.id" v-for="option in list">
        {{option.title}}
       </a-select-option>
    </a-select> -->
    <ActivityListPopup :url="url" v-if="isShowSelect && url" :initIds="ids" @change="ids = $event" @close="isShowSelect = false"></ActivityListPopup>
  </div>
</template>
<script>
import vuedraggable from 'vuedraggable'
  import ActivityListPopup from "@/components/SelectListPopup/Activity.vue"
  export default {
    components: {
    vuedraggable,
      ActivityListPopup
    },
    data() {
      return {
        isShowSelect: false,
        list: [],
        ids: [],
        uuid: '',
        change: 0,
      };
    },
    props: {
      activityType: {
        type: String
      },
      value: {
        type: Array,
        default () {
          return []
        }
      },
      datauuid:{
        type: String
      }
    },
    watch: {
      value(val) {
        this.ids = val || []
      },
      ids() {
        this.$emit('input', this.ids)

        this.getListInfo()
      },
      datauuid() {
        this.uuid = this.datauuid
        this.change = 0;
      },
      activityType () {
        this.change += 1;
        if(this.change >= 2){
          this.ids = [];
        }
      }
    },
    mounted() {
      this.ids = this.value || []
      this.change = 1;
      this.getListInfo()
    },
    computed: {
      url () {
        let map  = {
          all_activity: '/all-activity',
          yifanshang: '/yi-fan-shangs',
          peilashang: '/pei-la-shangs',
          lottery: '/lotteries',
          egg_lottery: '/egg-lotteries',
          seckill: '/seckills',
          jika: '/jikas',
          fudai: '/fudais',
          kapaishe: '/kapaishes',
          renyi: '/renyis',
          maoxian: '/maoxians',
          tuanzhan: '/tuan-zhans',
          rotate_lottery: '/rotate-lotteries',
          box: '/boxes',
          zhuli: '/zhili/activities'
        }
        return map[this.activityType]
      }
    },
    methods: {
      updateValue () {
        this.ids = this.list.map(item => {
          return item.id
        });
        this.$emit('input', this.ids)
      },
      getListInfo() {
        if (this.ids.length) {
          this.$http.get(this.url, {
            params: {
              ids: this.ids
            }
          }).then(res => {
            this.list = res.data.list
          })
        } else {
          this.list = []
        }
      },
      deleteItem(item) {
        this.ids.splice(this.ids.indexOf(item.id), 1)
      }
    }
  };
</script>
<style lang="scss" scoped>
  .list {
    display: flex;
    flex-wrap: wrap;

    .images {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      .uploaded-item {
        padding: 3px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        background-color: #fff;
        margin-right: 8px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        img {
          width: auto;
          height: 60px;
          cursor: pointer;
        }
        &:hover .action {
          opacity: 1;
        }
        .action {
          position: absolute;
          // width: 100%;
          // height: 100%;

          width: 20px;
          height: 20px;
          right: 0px;
          top: 0px;
          border-radius: 50%;

          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          background-color: rgba(0, 0, 0, 0.5);
          transition: all 0.4s;
          .action-item {
            margin: 0 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
          }
          &:hover {
            background: red;
          }
        }
      }
      .upload-btn {
        width: 66px;
        height: 66px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        /deep/ i {
          font-size: 24px;
        }
      }
    }

    .item {
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #bbb;
      border-radius: 6px;
      overflow: hidden;
      width: 80px;
      height: 120px;
      position: relative;

      .thumb {
        width: 80px;
        height: 80px;
      }

      .status-s {
        position: absolute;
        left: 0px;
        top: 50px;
        width: 100%;
        background: rgba(255, 0, 0, 0.5);
        text-align: center;
        color: white;
        font-size: 8px;
        font-weight: 500;
      }

      .status-c {
        position: absolute;
        left: 0px;
        top: 64px;
        width: 100%;
        background: rgba(255, 0, 0, 0.5);
        text-align: center;
        color: white;
        font-size: 8px;
        font-weight: 500;
      }

      .type-c {
        position: absolute;
        left: -2px;
        top: 2px;
        // width: 100%;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        color: white;
        font-size: 6px !important;
        // scale: 0.8;
        transform: scale(0.8);
        border-radius: 100px;
        padding: 2px 10px;
        font-weight: 500;
      }

      .title {
        width: 80px;
        font-size: 12px;
        font-weight: 500;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      &.add-item {
        border: 1px dashed #bbb;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        color: gray;
        .add-icon {
          font-size: 20px;
        }
        cursor: pointer;
        &:hover {
          background: #f5f5f5;
        }
      }
    }
  }


    .delete-icon {
      position: absolute;
      right: 2px;
      top: 2px;

      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      padding: 6px 6px;
      cursor: pointer;
      color: white;
      font-size: 13px;
      font-weight: 500;
      &:hover {
        background: rgba(255, 0, 0, 0.8);
      }
    }

</style>
